<template>
  <div class="box">
    <div class="header">
        <van-icon name="arrow-left" class="return" @click="$router.back()"/>
        <span>面试技巧</span>
    </div>
    <div class="find">
        <van-icon name="search" /><input type="text" class="search" placeholder="请输入关键字">
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <inter-view v-for="item in list" :key="item.id" :item="item"></inter-view>
  </van-list>
</van-pull-refresh>
  </div>
</template>

<script>
import InterView from './components/InterView.vue'
import { technicAPI } from '@/api/index'
export default {
  components: { InterView },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false
    }
  },
  created () {
    this.getauth()
  },
  methods: {
    async getauth () {
      const res = await technicAPI({
        start: 0,
        limit: 6
      })
      this.list = res.data.list
      console.log(res.data.list)
      this.finished = true
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    }
  }
}

</script>

<style lang="less" scoped>
.box{
    margin: 0;
    padding: 10px;
    .header{
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 10px;
.return{
    float: left;
    top: 5px;
}
span{
    margin-left: -20px;
}
}
.find{
    height: 35px;
    border-radius: 20px ;
    border: none;
    background-color: #f6f4f6;
    text-align: center;
    padding-left: 50px;
    font-size: 16px;
    color: #b3b3b3;
    margin-bottom: 20px;
    .search{
    font-size: 14px;
    color: #b3b3b3;
        height: 35px;
        background-color: #f6f4f6;
        border: none;
    }
}
}
</style>
